<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">

  <link href="chrome://resources/css/roboto.css" rel="stylesheet">
  <link href="common.css" rel="stylesheet">
  <link href="proximity_auth.css" rel="stylesheet">

  <script src="webui.js"></script>
  <script src="logs.js"></script>
  <script src="proximity_auth.js"></script>
  <script src="chrome://resources/mojo/mojo/public/js/mojo_bindings_lite.js">
  </script>
  <script src="chrome://resources/mojo/mojo/public/mojom/base/time.mojom-lite.js">
  </script>
  <script src="chrome://resources/mojo/chromeos/components/multidevice/mojom/multidevice_types.mojom-lite.js">
  </script>
  <script src="chrome://resources/mojo/chromeos/services/device_sync/public/mojom/device_sync.mojom-lite.js">
  </script>
  <script src="chrome://resources/mojo/chromeos/services/multidevice_setup/public/mojom/multidevice_setup.mojom-lite.js">
  </script>
</head>

<body>
  <!-- Panel for debug controls. -->
  <section id='controls'>
    <header>
      <div class='logo'>近</div>
      <div class='title'>ProximityAuth</div>
    </header>
    <div id='controls-panel'>
      <!-- Control for CryptAuth enrollment and sync -->
      <div class='control'>
        <div class='control-title'>CRYPTAUTH</div>
        <table>
          <tr>
            <td>DEVICE ID (truncated)</td>
            <td colspan="2" id='local-device-id'>----</td>
          </tr>

          <tr><td id='enrollment-title' state='synced'>ENROLLMENT</td></tr>
          <tr class='subrow'>
              <td>Last Success</td>
              <td id='last-enrollment'>
          </tr>
          <tr class='subrow'>
              <td>Next Refresh</td>
              <td id='next-enrollment'>
          </tr>
          <tr class='subrow'>
              <td><button id='force-enrollment'>Enroll</button></td>
          </tr>

          <tr><td id='device-sync-title' state='synced'>DEVICE SYNC</td></tr>
          <tr class='subrow'>
              <td>Last Success</td>
              <td id='last-device-sync'>
          </tr>
          <tr class='subrow'>
              <td>Next Refresh</td>
              <td id='next-device-sync'>
          </tr>
          <tr class='subrow'>
              <td><button id='force-device-sync'>Sync</button></td>
          </tr>

          <tr>
            <td>MULTIDEVICE NOTIFICATIONS</td>
          </tr>
          <tr class='subrow'>
            <td><button id='show-new-user-notif'>New User</button></td>
          </tr>
          <tr class='subrow'>
            <td>
              <button id='show-existing-user-new-host-notif'>
                Existing User (new host)
              </button>
            </td>
          </tr>
          <tr class='subrow'>
            <td>
              <button id='show-existing-user-new-chromebook-notif'>
                Existing User (new Chromebook)
              </button>
            </td>
          </tr>
        </table>
      </div>

      <!-- Control for showing synced remote devices. -->
      <div class='control' id='remote-devices-control'>
        <div class='control-title'>REMOTE DEVICES</div>
      </div>
    </div>
  </section>

  <!-- Panel for logs list. -->
  <section id='logs-panel'>
    <header>
      <button id='clear-logs-button'>Clear</button>
      <button id='save-logs-button'>Save Logs</button>
    </header>
    <div id='logs-list'> </div>
  </section>

  <!-- Template for a remote device entry. -->
  <template id='remote-device-template'>
    <div class='remote-device'>
      <div class='status-name-container'>
        <div class='device-connection-status' state='disconnected'>●</div>
        <div class='device-name'>Google Pixel</div>
      </div>
      <table>
        <tr>
          <td>Device ID</td>
          <td class='device-id'></td>
        </tr>
        <tr>
          <td>PII-Free Name</td>
          <td class='no-pii-name'></td>
        </tr>
        <tr>
          <td>Supported/Enabled Features</td>
          <td class='software-features'></td>
        </tr>
        <tr>
          <td>Is Unlock Key</td>
          <td class='is-unlock-key'></td>
        </tr>
        <tr>
          <td>Supports Mobile Hotspot</td>
          <td class='supports-mobile-hotspot'></td>
        </tr>
        <tr>
          <td>Is ARC++ Enrollment</td>
          <td class='is-arc-plus-plus-enrollment'></td>
        </tr>
        <tr>
          <td>Is Pixel Phone</td>
          <td class='is-pixel-phone'></td>
        </tr>
        <tr class='bluetooth-address-row' hidden>
          <td>Bluetooth Address</td>
          <td class='bluetooth-address'></td>
        </tr>
      </table>
    </div>
  </template>

  <!-- Template for a log item. -->
  <template id='item-template'>
    <div class='log-item' severity='0'>
      <div class="item-metadata">
        <div class='item-time'></div>
        <div class="flex"></div>
        <div class='item-source'></div>
      </div>
      <pre class="item-text flex">This is an error.</pre>
    </div>
  </template>
</body>

</html>
